<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件总线</title>
    <!-- 非父子组件间的传值，--同级组件之间的传值 -->
</head>
<body>
    
    <div id="app">
        <cpn01></cpn01>
        <cpn02></cpn02>
    </div>

    
    <!--  -->
    <script src="vue.js"></script>
    <script>
        // 传递 值 组件
        Vue.component('cpn01',{
            data(){
                return {
                    msg:'hello!',
                }
            },
            template:`
            <div>
                <!-- 调用 传值 函数！！！ -->
                <h1 @click="myTransFoo">cpn01(点击我传值):{{msg}}</h1>
            </div>        
            `,
            methods:{
                myTransFoo(){
                    // 获取/接受中间人 bus 的传值方法！！！
                    // bus.$emit('FooName',valueName);
                    bus.$emit('transFoo',this.msg);
                },
            }
        });

        // 接受 值 组件
        Vue.component('cpn02',{
            data(){
                return {
                    msg:'',
                }
            },
            template:`
            <div>
                <h1>cpn02:{{msg}}</h1>
            </div>
            `,
            // 重要！！！！
            // 传递 传值函数 给 中间人时 要使用 mounted生命周期函数！！！！
            // mounted()  注意写法！！！
            mounted(){
                // 给中间人 bus 传值方法！！！
                // bus.$on('FooName',(valueName)=>{})
                bus.$on('transFoo',(value)=>{
                    console.log(value);
                    this.msg = value;
                });
            }
        });

        // 新实例，中间人
        const bus = new Vue;
        
        new Vue({
            el:"#app",
            data(){
                return {
                }
            },
        })
    
    </script>
    
</body>
</html>